<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>collection is live</title>
    <style>
    	html, body,h2, ul, li{margin: 0;padding: 0;}
		body{font-family: arial;}
		#users{margin: 30px;width: 210px;box-shadow: 0px 1px 2px #bbb;}
		h2{height: 50px;line-height: 50px;padding-left: 20px;font-size: 18px;border-bottom: 1px solid #dfdfdf;}
		ul{padding: 10px 0;overflow: hidden;}
		.user{float: left;width: 50px;margin: 10px;list-style: none;}
		.user a{color: #666;text-decoration: none;font-size: 12px;}
    </style>
</head>
<body>
    <div id="users">
        <h2>8882人在学习该课程:</h2>
        <ul>
            <li class="user">
                <a href="/user/1">Satoshi</a>
            </li>
            <li class="user">
                <a href="/user/2">春来草青</a>
            </li>
            <li id="lastUser" class="user last">
                <a href="/user/3">Kash</a>
            </li>
        </ul>
    </div>
    <script>
    	var users = document.getElementById('users');
    	var a = users.getElementsByTagName('li');

    	alert('一共有' + a.length + '个用户!');
        alert(a);
        // a为htmlobjects collections
        // var lastUser = document.getElementById('lastUser');
        // lastUser.parentNode.removeChild(lastUser);
        // alert('一共有' + a.length + '个用户!');
        // 此时a只包含两个li

        // 通过标签名称获取元素
        // collections = element.getElementByTagName(tagname)
        // 注意这里的是element, 即已经获取到的元素
        // 当li的元素个数发生变化时,则对应的获取到的a也会发生变化,即a是活的,变化的.

        // 当*用在tagname时,它是通匹符的意思
        collections = users.getElementsByTagName('*');
        console.log(collections);
        // HTMLCollection(8) [h2, ul, li.user, a, li.user, a, li#lastUser.user.last, a, lastUser: li#lastUser.user.last]

    </script>
</body>
</html>
